<template>
  <PageWrapper contentFullHeight fixedHeight>
    <VxeBasicTable class="w-full h-full" ref="tableRef" v-bind="gridOptions">
      <template #action="{ row }">
        <a-button type="link" size="small" @click="handleView(row)">
          <template #icon><Icon icon="carbon:view" /></template>
        </a-button>
      </template>
    </VxeBasicTable>
    <StationPopup :stationData="stationData" />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import { Icon } from '@gui-pkg/components';
  import { PageWrapper, BasicTableProps } from '@gui-pkg/antdcomponents';
  import { VxeBasicTable, VxeGridInstance } from '@gui-pkg/antdcomponents';
  import StationPopup from '@/components/stationPopup';
  import { columns, searchFormSchema } from './rain.data';
  import { getPPAllData } from '@/api/oneMap/baseData';
  import { useStationDataStoreWithOut } from '@/store/modules/stationData';

  const stationDataStore = useStationDataStoreWithOut();

  const stationData = ref(null);
  const tableRef = ref<VxeGridInstance>();
  const gridOptions = reactive<BasicTableProps>({
    id: tableRef.value,
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    columns: columns,
    toolbarConfig: {
      className: "vxe-toolbarConfig",
    },
    formConfig: {
      enabled: true,
      className: "vxe-formConfig",
      items: searchFormSchema,
    },
    height: 'auto',
    proxyConfig: {
      ajax: {
        query: async ({ page, form }) => {
          const tableListData = await getPPAllData({
            ...form,
            startTime:form.tm==null?"":form.tm[0],
            endTime:form.tm==null?"":form.tm[1],
          });
          return { list: tableListData };
        },
      },
    },
  });

  const handleView = (data)=> {
    stationDataStore.setStationData(data);
  }

  // 监听侧边栏表格选择站点，地图点击站点，弹窗展示详情
  watch(
    () => stationDataStore.stationData,
    (val) => {
      stationData.value = val;
    }
  );
</script>

